<template>
  <div class="release">
    <van-nav-bar
      left-arrow
      title="发布"
      @click-left="$router.go(-1)"
    />
    <van-field
      v-model="localReviers.localReviewsTitle"
      rows="1"
      autosize
      label="标题"
      type="textarea"
      placeholder="请输入标题"
    />


    <van-field
      v-model="localReviers.biaoqian"
      rows="1"
      autosize
      label="标签一"
      type="textarea"
      placeholder="请输入标签"
    />

    <van-field
      v-model="localReviers.biaoqianOne"
      rows="1"
      autosize
      label="标签二"
      type="textarea"
      placeholder="请输入标签"
    />

    <van-field
      v-model="localReviers.localReviewsText"
      rows="3"
      autosize
      label="发布内容"
      type="textarea"
      placeholder="请输入内容"
      show-word-limit
    />
    <p class="img-title">图片</p>
    <div class="upload">
      <van-uploader
        v-model="fileList"
        :max-count="4"
        :after-read="onRead"
        accept="image/*"
        :multiple="true"
      ></van-uploader>
    </div>
    <van-button
      style="height: 50px"
      type="primary"
      size="large"
      class="btn"
      @click="releaseButton()"
    >发布</van-button>

  </div>
</template>

<script>
  import {Toast} from "vant";
  import { Dialog } from 'vant';
  import {
    addReviersByCustomer,
    selectResviersByCustomer,
    selectReplyVoByRevierwsId,
    addLocalReply,
    uploadImages,
  } from '@/api/customer/local.js'

    export default {
      name: "MyRelease",
      inject:['reload'],
      data () {
        return {
          title: '', // 发布标题
          content: '', // 发布内容
          fileList: [], // 上传图片
          show:false,
          urlList:[],
          //发布本地信息的参数
          localReviers:{
            localReviewsTitle:'',
            localReviewsText:'',
            biaoqian:'',
            biaoqianOne:'',
            fileList:[],
            urlList:[],
          },
          //查询用户发布的全部本地信息参数
          resviersVo:{},
          //用户发布的信息集合
          resviersVoList:[],
          //上传图片返回的真实路径
          imgUrl:[]
        }
      },
      //页面渲染前加载
      created(){

      },
      //方法调用
      methods:{
        //点击发布信息
        releaseButton(){
          if(this.localReviers.localReviewsTitle==''){
            console.log("123");
          }else if(this.localReviers.localReviewsText==''){
            console.log("456");
          }else {
            this.fileList.forEach(it=>{
              // console.log(it.file.name);
              // var str1= it.file.name.substring(0, it.file.name.indexOf("."));
              // console.log(str1);
              this.localReviers.fileList.push(it.file.name);
            })
            this.localReviers.urlList = this.urlList;
            addReviersByCustomer(this.localReviers).then((res)=>{
              if(res.data.code==200){
                this.localReviers = {};
                this.fileList = [];
                Toast('发布成功');
              }
              console.log(res);
            })
          }
        },
        //上传多图片
        onRead (e) {
          //注意，我们这里没有使用form表单提交文件，所以需要用new FormData来进行提交
          let fd = new FormData()
          if (e instanceof Array && e.length) { // 判断是否是多图上传 多图则循环添加进去
            e.forEach(item => {
              fd.append("files", item.file)//第一个参数字符串可以填任意命名，第二个根据对象属性来找到file
            })
          } else {
            fd.append("files", e.file)
          }
          uploadImages(fd).then((res)=>{
            if(res.data.code==200){
              this.urlList.push(res.data);
            }else {

            }
            console.log("***888***"+res.data.img0);
              this.imgUrl = res.data.img0
            console.log("***999***"+this.imgUrl)
          })
        },


      },
    }
</script>

<style scoped>

  .bottom span {
    color: rgba(89, 89, 89, 100);
    font-size: 14px;
    text-align: left;
    font-family: PingFangSC-regular;
  }

  .bottom {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
  }

  .bottom p {
    display: flex;
    align-items: center;
    margin-right: 7vw;
  }

  .bottom img {
    width: 19px;
    height: 19px;
    margin-right: 7px;
  }

  .tag {
    display: flex;
    padding: 10px 0;
  }

  .tag p {
    width: 23vw;
    height: 7vw;
    line-height: 20px;
    border-radius: 15px;
    background-color: rgba(245, 247, 251, 100);
    color: rgba(16, 16, 16, 100);
    font-size: 14px;
    text-align: center;
    font-family: Arial;
    border: 1px solid rgba(255, 255, 255, 100);
    line-height: 7vw;
  }

  .img-list {
    display: flex;
    flex-wrap: wrap;
  }

  .img-list img {
    width: 29vw;
    height: 29vw;
    margin-right: 8px;
    margin-top: 9px;
  }

  .jrps {
    color: rgba(16, 16, 16, 100);
    font-size: 14px;
    text-align: left;
    font-family: SourceHanSansSC-regular;
    margin-left: 8vw;
    margin-top: 15px;
  }

  .title {
    display: flex;
    align-items: center;
    color: rgba(16, 16, 16, 100);
    font-size: 16px;
    text-align: left;
    font-family: SourceHanSansSC-bold;
  }

  .title img {
    width: 9vw;
    height: 9vw;
    border-radius: 50%;
    margin-right: 10px;
  }

  .list {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    padding: 10px;
    background-color: #fff;
    margin-top: 10px;
  }

  .btn {
    margin-top: 20px;
    margin-bottom: 10px;
    width: 80%;
  }

  .img-title {
    font-size: 14px;
    color: #646566;
    box-sizing: border-box;
    text-align: left;
    margin: 0;
    padding: 10px 16px;
    color: #646566;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
  }

  .upload {
    background-color: #fff;
    box-sizing: border-box;
    padding: 10px;
    padding-bottom: 0;
    text-align: left;
  }

  .van-field {
    margin-top: 10px;
  }

  .release {
    /* height: 100vh; */
    overflow: hidden;
    background-color: #f7f8fa;
    padding-bottom: 10px;
    box-sizing: border-box;
  }
</style>
